<template>
  <view class="project-list">
    <view class="search-box">
      <uni-easyinput
        confirmType="search"
        prefixIcon="search"
        v-model="searchKey"
        :trim="true"
        placeholder="搜索"
        @confirm="getProjectList()"
        @clear="getProjectList()">
      </uni-easyinput>
    </view>
    <view class="list-content">
      <view v-if="!projects.length" class="no-content">暂无数据</view>
      <view class="list-item" v-for="item in projects" :key="item.key" @click="toProjectDetail(item)">
        <image class="item-bg" src="/static/image/test-project-item-bg.png"></image>
        <view class="project-info">
          <view class="info-box">
            <view class="name-box">
              <view v-if="item.typeName" class="project-type">{{ item.typeName }}</view>
              <view class="project-name">{{ item.name }}</view>
            </view>
            <view class="time-box">{{ item.modifyTime }}</view>
            <view class="addr-box">
              <view class="addr-label">项目地址：</view>
              <view class="addr-content">{{ item.address }}</view>
            </view>
          </view>
          <view class="operate-box">
            <view class="operate-item">
              <view class="operate-content">详情</view>
              <view class="iconfont icon-arrow-right"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <cover-view v-if="canEdit" class="page-bottom-btn" @click="toAddProject">新增测试项目</cover-view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import { formatDate } from '@/utils/index.js'
import { PROJECT_TYPE_NAME } from '@/constant/index.js'
export default {
  mixins: [mixin],
  data() {
    return {
      searchKey:'',
      projects: [],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPageCount: 0
      }
    }
  },
  onReady() {
    this.setTitle()
  },
  onShow() {
    this.getProjectList()
  },
  onPullDownRefresh() {
    this.getProjectList()
  },
  methods: {
    setTitle(projectCount) {
      uni.setNavigationBarTitle({
        title: `测试项目${projectCount ? `(${projectCount})` : ''}`
      })
    },
    getProjectList() {
      const self = this
      uni.request({
        url: '/report/search',
        data: {
          key: self.searchKey
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              const projectItem = {
                key: item.id,
                projectId: item.id,
                name: item.name || '',
                typeName: PROJECT_TYPE_NAME[item.type] || '',
                modifyTime: formatDate(item.modify_time, 'yyyy-MM-dd'),
                address: item.address || '-'
              }
              arr.push(projectItem)
            })
            self.projects = arr
            self.setTitle(self.projects.length)
          }
        },
        complete() {
          uni.stopPullDownRefresh()
        }
      })
    },
    toAddProject() {
      uni.navigateTo({
        url: '/pages/index/test-project-detail/test-project-detail'
      })
    },
    toProjectDetail(project) {
      uni.navigateTo({
        url: `/pages/index/test-project-detail/test-project-detail?id=${project.projectId}`
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.project-list {
  padding: 20rpx 30rpx 120rpx 30rpx;
  .search-box {}
  .list-content {
    .no-content {
      margin-top: 40vh;
      text-align: center;
      color: $text-secondary;
    }
    .list-item {
      position: relative;
      padding: 26rpx 30rpx;
      background-color: $white;
      border-radius: 10rpx;
      margin-top: 20rpx;
      .item-bg {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
      }
      .project-info {
        position: relative;
        z-index: 2;
        min-height: 120rpx;
        display: flex;
        justify-content: space-between;
        .info-box {
          .name-box {
            position: relative;
            display: flex;
            align-items: center;
            .project-type {
              display: flex;
              padding: 0 6rpx;
              border-radius: 4rpx;
              margin-right: 10rpx;
              height: 30rpx;
              font-size: $font-size-0;
              color: $info;
              background-color: $background-info;
            }
            .project-name {
              font-size: $font-size-3;
              width: 440rpx;
              font-weight: bold;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .time-box {
            margin-top: 6rpx;
            font-size: $font-size-1;
            color: $text-secondary;
          }
          .addr-box {
            display: flex;
            align-items: center;
            margin-top: 6rpx;
            font-size: $font-size-1;
            color: $text-secondary;
            .addr-content {
              color: $text-base;
              width: 420rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        .operate-box {
          display: flex;
          align-items: center;
          font-size: $font-size-1;
          color: $text-secondary;
          .operate-item {
            display: flex;
            align-items: center;
          }
          .iconfont {
            margin-left: 6rpx;
          }
        }
      }
    }
  }
}
</style>
